<template>
	<view style="padding-bottom: 180rpx;">
		<view class="w96 radius20  mt20"
			style="padding:40rpx; background:linear-gradient(to right, #E7F7BC, 50%, #CEEE5B);">
			<block v-if="type==1">
				<view class="flex" style="">
					<image src="@/static/order/time.png" mode=""
						style="width: 40rpx; height: 40rpx;margin-right: 30rpx;">
					</image>
					<text style="color: #000;">退款处理中</text>
				</view>
				<view class="mt20 flex-between">
					<view class="" style="color: #5C6D08;font-size: 24rpx;">
						退款申请已交由平台处理
					</view>
					<u-icon name="arrow-right" @click="showStep"></u-icon>
				</view>

			</block>
			<block v-if="type==2">
				<view class="flex" style="">
					<image src="@/static/order/time.png" mode=""
						style="width: 40rpx; height: 40rpx;margin-right: 30rpx;">
					</image>
					<text style="color: #000;">退款成功</text>
				</view>
				<view class="mt20" style="color: #5C6D08;font-size: 24rpx;">
					双方已协商一致退款
				</view>
				<view class="flex-between mt20">
					<view class="">
						退款金额
					</view>
					<view class="">
						￥50.00
					</view>
				</view>
			</block>
			<block v-if="type==3">
				<view class="flex" style="">
					<image src="@/static/order/time.png" mode=""
						style="width: 40rpx; height: 40rpx;margin-right: 30rpx;">
					</image>
					<text style="color: #000;">退款已关闭</text>
				</view>
				<view class="mt20" style="color: #5C6D08;font-size: 24rpx;">
					您已取消退款申请
				</view>
			</block>
		</view>
		<view class="w96 radius20 bgwhite mt20" style="padding:40rpx;">
			<view class="flex" style="">
				<view class="" style="width: 40rpx;margin-right: 30rpx;">
					<image src="@/static/order/tuik.png" mode="" style="width: 40rpx; height: 40rpx;">
					</image>
				</view>
				<text style="color: #000;font-size: 26rpx;">用户具体地址(需要用户手动填写，精确到门牌号)</text>
			</view>
			<view class="mt20" style="color: #c1c1c1;font-size: 24rpx;margin-left: 70rpx;">
				用户名 0123456789
			</view>
		</view>
		<view class="w96 radius20 bgwhite mt20" style="padding:30rpx;">
			<view class="flex" style="padding: 20rpx;align-items: center;position: relative;">
				<image src="@/static/lg.png"
					style="width: 120rpx;height: 120rpx;margin-right:20rpx;background-color: #c1c1c1;border-radius: 10rpx;"
					mode="">
				</image>
				<text style="font-size: 24rpx;">家具维修</text>
				<view class="" style="position:absolute;right: 30rpx;height: 20rpx;font-size: 24rpx;">
					数量 X1
				</view>
			</view>
			<view class="flex" style="padding: 20rpx;justify-content: space-between;">
				<text style="font-weight: bold;font-size: 24rpx;">商品类型</text>
				<text style="font-weight: bold;font-size: 24rpx;">橱柜</text>
			</view>
			<view class="flex" style="padding: 20rpx;justify-content: space-between;">
				<text style="font-weight: bold;font-size: 24rpx;">商品数量</text>
				<text style="font-weight: bold;font-size: 24rpx;">1套</text>
			</view>
			<!--  v-if="type==1||type==6" -->
			<!-- <block>
				<view class="flex" style="padding: 20rpx;justify-content: space-between;">
					<text style="font-weight: bold;font-size: 24rpx;">协商历史</text>
					<text style="font-weight: bold;font-size: 24rpx;">查看</text>
				</view>
				<view class="flex" style="padding: 20rpx;justify-content: space-between;">
					<text style="font-weight: bold;font-size: 24rpx;">退款原因</text>
					<text style="font-weight: bold;font-size: 24rpx;">问题未解决</text>
				</view>
			</block> -->
			<block>
				<view class="flex" style="padding: 20rpx;justify-content: space-between;align-items: center;">
					<text style="font-weight: bold;font-size: 24rpx;">商品照片</text>
					<view class="flex" style="">
						<view class="" style="width: 100rpx;height: 100rpx;background-color: #c1c1c1;margin: 0 6rpx;"
							v-for="i in 4" :key="i">
							<!-- <image src="" mode=""></image> -->
						</view>
					</view>
				</view>
				<view class="flex" style="padding: 20rpx;justify-content: space-between;">
					<text style="font-weight: bold;font-size: 24rpx;">需求说明</text>
					<text style="font-weight: bold;font-size: 24rpx;">用户具体需求说明，可留言</text>
				</view>
			</block>

			<view class="flex" style="padding: 20rpx;justify-content: space-between;">
				<text style="font-weight: bold;font-size: 24rpx;">订单编号</text>
				<view>
					<text style="font-weight: bold;font-size: 24rpx;">2024112101234567</text>
					<text style="font-size: 24rpx;color: #CEEE5B;padding-left: 10rpx;">复制</text>
				</view>
			</view>
			<view class="flex" style="padding: 20rpx;justify-content: space-between;">
				<text style="font-weight: bold;font-size: 24rpx;">下单时间</text>
				<text style="font-weight: bold;font-size: 24rpx;">2024-12-21 17：00</text>
			</view>
			<view class="flex" style="padding: 20rpx;justify-content: space-between;">
				<text style="font-weight: bold;font-size: 24rpx;">期望上门时间</text>
				<text style="font-weight: bold;font-size: 24rpx;">2024-12-21 12：00-14：00</text>
			</view>

		</view>
		<!--  v-if="type ==1||type==2||type==3||type==4" -->
		<view class="w96 radius20 bgwhite mt20">
			<view class="w94" style="padding:30rpx;">
				费用明细
			</view>
			<view class="w94" style="padding-left: 30rpx;border-bottom: 2rpx solid #848484;">
				<view class="flex-between" style="line-height:2;">
					<view class="" style="color:#ccc;font-size:26rpx">
						商品金额
					</view>
					<view class="" style="font-size:26rpx">
						￥ 500.00
					</view>
				</view>
				<view class="flex-between" style="line-height:2;">
					<view class="" style="color:#ccc;font-size:26rpx">
						额外价格
					</view>
					<view class="" style="font-size:26rpx">
						￥ 500.00
					</view>
				</view>
				<view class="flex-between" style="line-height:2;">
					<view class="" style="color:#ccc;font-size:26rpx">
						优惠券
					</view>
					<view class="flex" style="color: red;">
						<view class="" style="font-size:26rpx;color: red;">
							-￥ 500.00
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-between" style="line-height:2;padding: 0 30rpx;">
				<text style="font-size: 24rpx;">到手合计:</text>
				<view>
					<text style="font-size: 24rpx;">￥</text>
					<text style="font-size: 34rpx;">500000000.00</text>
				</view>
			</view>
		</view>
		<block v-if="type==1">
			<view class="flex-between"
				style="width:100%;box-shadow: 1px -5px 10px #ccc;position: fixed;bottom: 0;padding: 30rpx; background-color: #fff;">
				<!-- 	<u-icon name="/static/order/share.png" label="平台介入" labelPos="bottom" labelSize="12px"
					@click="showStep"></u-icon> -->
				<view class=""
					style="width: 48%;height: 90rpx;border-radius: 90rpx;background-color: #fff; border: 2rpx solid #848484; text-align: center;line-height: 2.5;"
					@click="changeType">
					取消退款
				</view>
				<view class=""
					style="width: 48%;height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;"
					@click="moveIn">
					客服介入
				</view>
			</view>
		</block>
		<u-popup :show="show" @close="show=false" mode="bottom">
			<view style="min-height: 600rpx;padding: 30rpx;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">上传现场照片</text>
					<text style="font-size: 28rpx;color: #848484;">请您在服务订单前拍摄现场照片并上传</text>
				</view>
				<view class="flex" style="justify-content: space-evenly;flex-wrap: wrap;margin: 40rpx 0;">
					<view class="flex-center"
						style="width:calc(100%/2 - 20rpx);height: 300rpx;border-radius: 20rpx;background-color: #F7FCE6;margin: 5rpx;"
						v-for="i in 4" :key="i">
						<view class="flex-center"
							style="width: 120rpx; height: 120rpx;border-radius: 50%;background-color: #CEEE5B;">
							<image src="@/static/order/carm.png" mode="" style="width: 80rpx; height: 80rpx;">
							</image>
						</view>
					</view>
				</view>
				<view class=""
					style="height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;">
					立即上传
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" @close="show2=false" mode="bottom">
			<view style="min-height: 600rpx;padding: 30rpx;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">选择原因</text>
				</view>
				<u-radio-group v-model="radiovalue7" :borderBottom="false" placement="column" iconPlacement="right">
					<u-radio :customStyle="{marginBottom: '16px'}" v-for="(item, index) in radiolist7" :key="index"
						:label="item.name" :name="item.name" size="35" labelSize="35" iconSize="35">
					</u-radio>
				</u-radio-group>
				<view class=""
					style="height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;">
					立即上传
				</view>
			</view>
		</u-popup>
		<u-popup :show="stepShow" @close="stepShow=false" mode="bottom">
			<view style="min-height: 600rpx;padding: 30rpx;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">报价进度</text>
				</view>
				<mystep :steps="[{title:'已下单'},{title:'已出库'},{title:'已到货'}]" :activeStepIndex="1"></mystep>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import mystep from '@/components/mystep.vue'
	export default {
		data() {
			return {
				type: 1, // 1:待服务  2：施工中 3：待结算  4：已结束 5：退款中 6：退款成功 7：待中选
				show: false,
				show2: false,
				stepShow: false,
				va: '',
				radiolist7: [{
						name: '可爱',
						disabled: false
					},
					{
						name: '一般',
						disabled: false
					},
					{
						name: '不可爱',
						disabled: false
					},
				],
			}
		},
		components: {
			mystep
		},
		methods: {
			changeType() {
				this.type++
				if (this.type > 3) this.type = 1
				console.log('this.type: ', this.type);
			},
			ptjr() {
				this.show2 = true
			},
			showStep() {
				this.stepShow = true
			},
			moveIn() {
				console.log("客服介入，moveIn");
			}
		},
		onLoad(opt) {
			this.type = opt.type
			// console.log(opt,opt,'type',this.type)
			// console.log(opt,opt.type,'type',this.type)
		}
	}
</script>

<style>
	.grid-text {
		font-size: 22rpx;
		margin-top: 12rpx;
		color: #000;
	}
</style>